<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>车间俯视图</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      background: #000;
      overflow: hidden;
    }

    #mycanvas {
      width: 1600px;
      height: 700px;
      border: 1px solid #8fe6f4;
      /* background:rgb(68, 68, 68); */
      background: #11516e;
      box-shadow: 0px 0px 10px 2px inset #fff;
      margin: auto;
      margin-top: 100px;
    }
  </style>
</head>

<body>
  <div id="mycanvas">
    <canvas id="firCan">当前浏览器版本过低不支持canvas，请升级！</canvas>
  </div>
</body>
<script>
  var mycanvas = document.querySelector('#mycanvas');
  var firCan = document.querySelector('#firCan');
  var boxX = document.querySelector('#x');
  var boxY = document.querySelector('#y');
  // 获取div的宽
  var boxWidth = mycanvas.clientWidth;
  // 获取div的高
  var boxHeight = mycanvas.clientHeight;

  // 设置canvas的宽和高
  firCan.width = boxWidth;
  firCan.height = boxHeight;
  // 获取2D渲染上下文
  var context = firCan.getContext('2d');
  // 绘制线条
  context.beginPath();
  context.moveTo(boxWidth / 8, 0);
  context.lineTo(boxWidth / 8, boxHeight / 6 * 4.5);
  context.lineTo(boxWidth / 8*6, boxHeight / 6 * 4.5);
  context.lineTo(boxWidth / 8*6, boxHeight / 6 * 2.5);
  context.lineTo(boxWidth / 8*2, boxHeight / 6 * 2.5);
  context.lineTo(boxWidth / 8*2, boxHeight / 6 * 1.5);
  context.shadowBlur = 10;
  context.shadowColor = '#fff';
  context.shadowOffsetX = 2;
  context.strokeStyle = '#95e1f6';
  context.lineWidth = 2;
  context.stroke();

  // 右侧竖线
  context.beginPath();
  context.moveTo(boxWidth / 8*7, 0);
  context.lineTo(boxWidth / 8 * 7, boxHeight);
  context.shadowBlur = 10;
  context.shadowColor = '#fff';
  context.strokeStyle = '#95e1f6';
  context.stroke();

  // 上侧横线
  context.beginPath();
  context.moveTo(boxWidth / 8 * 1, boxHeight / 6*1.5);
  context.lineTo(boxWidth / 8 * 7, boxHeight / 6 * 1.5);
  context.shadowBlur = 10;
  context.shadowColor = '#fff';
  context.strokeStyle = '#95e1f6';
  context.stroke();

  // 右侧短竖线
  context.beginPath();
  context.moveTo(boxWidth / 8 * 5.5, boxHeight / 6*1.5);
  context.lineTo(boxWidth / 8 * 5.5, boxHeight / 6 * 2.5);
  context.shadowBlur = 10;
  context.shadowColor = '#fff';
  context.strokeStyle = '#95e1f6';
  context.stroke();


  // context.beginPath();
  // // 绘制一个圆点
  // this.context.arc(
  //   100,
  //   300,
  //   5,
  //   0,
  //   Math.PI * 2,
  //   false
  // );
  // this.context.fillStyle = '#e2c439';
  // context.font = "20px KTKaiti";
  // context.fillText("探伤车间", 65, 340);
  // this.context.fill();

  // context.beginPath();
  // this.context.arc(
  //   600,
  //   60,
  //   5,
  //   0,
  //   Math.PI * 2,
  //   false
  // );
  // context.fillText("组装车间", 620, 65);
  // this.context.fill();

  // context.beginPath();
  // this.context.arc(
  //   600,
  //   460,
  //   5,
  //   0,
  //   Math.PI * 2,
  //   false
  // );
  // context.fillText("轴承车间", 620, 465);
  // this.context.fill();

  // context.beginPath();
  // this.context.arc(
  //   1250,
  //   460,
  //   5,
  //   0,
  //   Math.PI * 2,
  //   false
  // );
  // context.fillText("轮对车间", 1270, 465);
  // this.context.fill();

  // context.beginPath();
  // context.moveTo(100, 300);
  // context.quadraticCurveTo(150, 30, 600, 60);
  // context.shadowBlur = 10;
  // context.shadowColor = '#fff';
  // context.strokeStyle = '#95e1f6';
  // // 虚线
  // context.setLineDash([8, 4]);
  // context.stroke();

  // context.beginPath();
  // context.moveTo(600, 60);
  // context.quadraticCurveTo(200, 330, 600, 460);
  // context.shadowBlur = 10;
  // context.shadowColor = '#fff';
  // context.strokeStyle = '#95e1f6';
  // // 虚线
  // context.setLineDash([8, 4]);
  // context.stroke();

  // context.beginPath();
  // context.moveTo(600, 60);
  // context.quadraticCurveTo(550, 630, 1250, 460);
  // context.shadowBlur = 10;
  // context.shadowColor = '#fff';
  // context.strokeStyle = '#95e1f6';
  // // 虚线
  // context.setLineDash([8, 4]);
  // context.stroke();
</script>

</html>